<template>
  <div>
    <div class="search-tool">
        <el-select v-model="search.type" @change="setLevelTowOptions">
            <el-option v-for="item in levelOneOptions" :key="item.value" :label="item.text" :value="item.value" />
            <el-option v-if="showDealer" label="经销店" :value="5" />
        </el-select>
        <el-select v-model="search.screen" multiple collapse-tags clearable @change="emitSearch">
            <el-option v-for="item in levelTowOptions" :key="item.value" :label="item.text" :value="item.value" />
        </el-select>
    </div>
  </div>
</template>

<script>
const levelOneOptions = [
  { value: 4, text: '全部' },
  { value: 2, text: '省份' },
  { value: 3, text: '城市' }
]
const initLevelTowOptions = [
    { value: 0, text: '销售大区' },
    { value: 1, text: '出行大区' }
]
export default {
  props: {
    regions: {
      type: Array,
      default() {
        return []
      }
    },
    province: {
      type: Array,
      default() {
        return []
      }
    },
    cities: {
      type: Array,
      default() {
        return []
      }
    },
    dealer: {
      type: Array,
      default() {
        return []
      }
    },
    modelName: {
      type: String,
      default() {
        return ''
      }
    },
    showDealer: {
        type: Boolean,
        default() {
            return true
        }
    }
  },
  data() {
    return {
      levelTowOptions: initLevelTowOptions,
      search:{
        type: 4,
        screen: []
      },
      levelOneOptions
    }
  },
  created() {
    // this.queryHistoryList()
  },
  methods: {
   setLevelTowOptions(value) {
      this.search.screen = []
      switch(value) {
        case 2:
          this.levelTowOptions = this.province
        break;
        case 3:
          this.levelTowOptions = this.cities
        break;
        case 4:
          this.levelTowOptions = initLevelTowOptions
        break;
        case 5:
          this.levelTowOptions = this.dealer
        break;
      }
      this.emitSearch()
   },
   emitSearch() {
       this.$emit('search', { ...this.search, modelName: this.modelName })
   }
  }
}
</script>
<style lang="scss" scoped>
 .search-tool{
    text-align: right;
 }
</style>
